<template>
  <div id="app">
    <section class="todoapp">
        <div>
            <list-header></list-header>
            <list-Content v-if="uncheckedLen"></list-Content>
            <list-Footer v-if="uncheckedLen"></list-Footer>
        </div>
    </section>
  </div>
</template>

<script>
  import listHeader from '@/components/list-header'
  import listContent from '@/components/list-content'
  import listFooter from '@/components/list-footer'

  export default {
    name: 'App',
    data(){
      return {

      }
    },
    computed:{
      uncheckedLen(){
          return this.$store.state.list.length;
      },
    },
    components:{
      listHeader,
      listContent,
      listFooter
    }
  }
</script>
